<template>
  <div class="app-container" style="margin-bottom: 25px;background-color: rgb(255,255,255)">
    <div class="header_top">
      <div class="topcont">
        <div class="topleft">
          <span class="pic">
              <img src="../../../assets/img/resources/pic_news.png"  alt="安全动态">
          </span>
        </div>
        <form>
          <div class="searchbg">
            <input type="text" id="keyWord" v-model="queryParams.title" placeholder="请输入关键字">
            <button type="submit" @click="handleQuery" class="btn_search"></button>
          </div>
        </form>
      </div>
    </div>
    <div class="pagecontent">
      <div class="cont_left">
        <ul class="ul_list05">
          <li>
            <p style="height: 30px; line-height: 30px;">
              <span class="pleft" style="font-size: 20px;">
                  <a href="#" @click="toInfo(hotSecurityArticles.id,'security')" :title="hotSecurityArticles.title">
                      {{hotSecurityArticles.title}}
                  </a>
              </span><span>[{{parseTime(hotSecurityArticles.createTime,'{y}-{m}-{d}') }}]</span>
            </p>
            <div class="imga">
              <a href="#" @click="toInfo(hotSecurityArticles.id,'security')">
                <img  :src="hotImage" alt="hotSecurityArticles.title">
              </a>
            </div>
            <div class="imgra">
              <div style="height: 147px;margin-left: 240px" v-html="hotSecurityArticles.content">
              </div>
            </div>
          </li>
          <li v-for="(item,index) in articlesList" :key="index">
            <div class="imgb">
              <a href="#" @click="toInfo(item.id,'security')" :title="hotSecurityArticles.title">
                <img :src="item.coverFiles[0].url" :alt="hotSecurityArticles.title">
              </a>
            </div>
            <div class="imgrb" style="margin-left:125px ">
              <p>
                <span class="pleft">
                  <a href="#" @click="toInfo(item.id,'security')" :title="hotSecurityArticles.title">
                    {{item.title}}
                  </a>
                </span>
                <span>[{{parseTime(hotSecurityArticles.createTime,'{y}-{m}-{d}')}}]</span>
              </p>
              <h4 style="width: 100%;font-size: 12px;font-weight: normal;">
                {{item.head}}
              </h4>
            </div>
          </li>
        </ul>
        <div class="page">
          <pagination
            v-show="total>0"
            :total="total"
            :page-sizes="[10, 20, 40, 60]"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {listSecurityArticles,getHotSecurityArticles} from "@/api/resources/securityArticles.js";
export default {
  name: "List",
  data() {
    return {
      // 总条数
      total: 0,
      // 参数表格数据
      articlesList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        isPopular:'0',
        title: '',
      },
      hotSecurityArticles:{},
      hotImage:''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询参数列表 */
    getList() {
      listSecurityArticles(this.addDateRange(this.queryParams)).then(response => {
          this.articlesList = response.rows;
          this.total = response.total;
      });
      getHotSecurityArticles().then(response => {
        this.hotSecurityArticles = response.data;
        this.hotImage = response.data.coverFiles[0].url;
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    toInfo(id,type){
      if(type === 'security'){
        this.$router.push({path:'/securityArticles/info',query:{id:id}})
      }else if(type === 'antiFraud') {
        this.$router.push({path:'/antiFraudArticles/info',query:{id:id}})
      }else {
        this.$router.push({path:'/securityArticles/info',query:{id:id}})
      }
    }
  },
}
</script>

<style scoped>
.header_top {
  width: 1519px;
  padding: 19px 0 5px;
  background: url(../../../assets/img/resources/top_bg.jpg) no-repeat top center;
  overflow: hidden;
}
.header_top .topcont, .pagecontent {
  width: 980px;
  margin: 0 auto;
}
.header_top .topleft {
  float: left;
  height: 34px;
}
.header_top .searchbg input {
  float: left;
  width: 194px;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  padding: 0px 2px;
  border: none;
  outline: none;
  margin-left: 620px;
}
input, button, textarea, select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
}
.header_top .searchbg .btn_search {
  float: right;
  display: block;
  width: 46px;
  height: 24px;
  background: url(../../../assets/img/resources/searchbg.jpg) no-repeat -199px -1px;
  border: none;
  outline: none;
  cursor: pointer;
}
form {
  display: block;
  margin-top: 0em;
}
.pagecontent {
  padding-bottom: 20px;
  overflow: hidden;
}
.cont_left {
  float: left;
  border-top: #829ca8 1px solid;
}
@media screen and (min-width: 980px)
.cont_left {
  width: 670px;
}
.cont_right {
  float: right;
}
@media screen and (min-width: 980px)
.cont_right, .heada, .ul_list03 li {
  width: 250px;
}
.ul_list05 {
  width: 100%;
  margin: 10px 0px;
  overflow: hidden;
}
ol, ul {
  list-style: none;
}
.ul_list05 li {
  width: 100%;
  display: block;
  padding: 15px 0px;
  border-bottom: #ccc 1px dotted;
  overflow: hidden;
}
.ul_list05 li p .pleft {
  float: left;
  width: 74%;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  overflow: hidden;
}
.ul_list05 li p span {
  float: right;
  text-align: right;
  color: #999;
  font-size: 12px;
}
.ul_list05 .imga {
  float: left;
  width: 228px;
  height: 146px;
}
@media screen and (min-width: 980px)
.ul_list05 .imgra {
  float: left;
  width: 430px;
  padding-left: 10px;
}
.page {
  padding: 10px;
  text-align: right;
  font-size: 12px;
  overflow: hidden;
  margin-top: -22px;
}
.page .current {
  background: #acacac;
  border: 1px solid #ccc;
  padding: 2px 5px;
  color: #fff;
  margin: 2px 3px;
  display: inline;
}
.page a {
  border: 1px solid #acacac;
  background: #FFF;
  padding: 2px 5px;
  text-decoration: none;
  margin: 2px 3px;
  display: inline;
}
.ul_list05 .imga img {
  width: 228px;
  height: 146px;
}
.ul_list05 li h4 {
  font-size: 12px;
  height: 56px;
  line-height: 28px;
  overflow: hidden;
}
.ul_list05 .imgb {
  float: left;
  width: 116px;
  height: 74px;
}
.ul_list05 .imgb img {
  width: 116px;
  height: 74px;
  overflow: hidden;
}
.ul_list05 li p .pleft {
  float: left;
  width: 74%;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  overflow: hidden;
}
.ul_list05 li p span {
  float: right;
  text-align: right;
  color: #999;
  font-size: 12px;
}
.ul_list05 li h4 {
  font-size: 12px;
  height: 56px;
  line-height: 28px;
  overflow: hidden;
}
@media screen and (min-width: 980px)
.ul_list05 .imgrb {
  float: left;
  width: 540px;
  padding-left: 10px;

}
a {
  color: #3b639f;
  text-decoration: none;
}
a:hover {
  color: rgb(218,0,0);
}
</style>
